import React, { FC, useEffect, useState } from 'react'
import { Button, Drawer, Form, Radio, Select, Input } from 'antd'
import ProCard from '@ant-design/pro-card'
import { Config } from '@utils/Constants'
import { getFileList } from '@/services/proFile'

const FormItem = Form.Item
const formTailLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 15 }
}

interface CrateArgProps {
  onSubmit:any,
  onClose:any,
  visible:boolean,
  projectId:string
}

const CrateArg: FC<CrateArgProps> = (props) => {

  const [form] = Form.useForm()
  const { onSubmit, onClose, visible, projectId } = props
  const [dataTypeObjList, setDataTypeObjList] = useState<any>([])
  const [voList, setVoList] = useState<any>([])


  useEffect(() => {
    // 获取Vo字段列表
    if (visible) {
      getFileList({ project_id: projectId, file_type: 'vo' }).then(res => {
        if (res.code === 10000) {
          setVoList(res.data)
        }
      })
    }
  }, [projectId, visible])

  const changeVo = (type: string) => {
    if (type === 'vo') {
      setDataTypeObjList(voList)
    } else if (type === 'base') {
      const arr: any = []
      Config.DATA_TYPE_LIST.map((val) => {
        arr.push({ name: val })
      })
      setDataTypeObjList(arr)
    }
  }


  const submit = () => {
    // 表单验证
    form.validateFields().then((data) => {
      const voId = data.arg_type_id;
      const item = voList.filter((val:any) => val.id === voId)[0];
      data.arg_type_name = item.name;
      onSubmit(data);
    })
  }

  return (
    <Drawer
      title="添加参数"
      width={600}
      onClose={() => onClose(false)}
      visible={visible}
      bodyStyle={{ paddingBottom: 80, backgroundColor: '#f0f2f5' }}
      footer={
        <div style={{
          textAlign: 'right'
        }}>
          <Button key="submit" onClick={submit} type="primary">
            保存
          </Button>
          <Button style={{ marginLeft: 10 }} onClick={() => onClose(false)}>
            关闭
          </Button>
        </div>
      }>
      <ProCard>
        <Form form={form}>
          <FormItem {...formTailLayout} name="arg_type"
                    rules={[{ required: true, message: '请选择参数类型' }]} label="参数类型">
            <Radio.Group onChange={(val) => changeVo(val.target.value)}>
              <Radio.Button value="base">base</Radio.Button>
              <Radio.Button value="vo">vo</Radio.Button>
            </Radio.Group>
          </FormItem>
          <FormItem {...formTailLayout} name='arg_type_id' rules={[{ required: true, message: '请选择参数' }]} label="参数">
            <Select placeholder="请选择参数" style={{ width: '80%' }}>
              {dataTypeObjList.map((item: any, index: number) => (
                <Select.Option key={index} value={item.id}>{item.name}</Select.Option>
              ))}
            </Select>
          </FormItem>
          <FormItem {...formTailLayout} name='name' rules={[{ required: true, message: '请输入参数名称' }]} label="参数名称">
            <Input />
          </FormItem>
          <FormItem {...formTailLayout} name='collection_type' initialValue={'single'} rules={[{ required: true, message: '请选择集合类型' }]} label="集合类型">
            <Radio.Group>
              <Radio value="single">单值</Radio>
              <Radio value="list">List</Radio>
              <Radio value="map">Map</Radio>
              <Radio value="set">Set</Radio>
            </Radio.Group>
          </FormItem>
        </Form>
      </ProCard>

    </Drawer>
  )
}

export default CrateArg
